@import "@/app/styles";

.Dropzone {
  $this: &;
  position: relative;
  padding: 24px;
  border: 1px dashed $color-black;
  border-radius: $border-radius;
  cursor: pointer;
  transition: all $transition;

  &__isDragActive {
    border: 1px dashed $color-primary;
    background-color: $color-gray;
  }

  &:hover {
    border: 1px dashed $color-primary;
    background-color: $color-primary-light;
  }

  &#{$this}__isError {
    border: 1px dashed $color-red;
    background-color: $color-light-red;

    &:hover {
      border: 1px dashed $color-red;
      background-color: $color-light-red-hover;
    }
  }
}
